<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>通讯录</title>
</head>
<body>
<div class="report-con">
    <div class="table">
        <table id="address_book_table">
            <tr>
                <th>姓名</th>
                <th>号码</th>
                <th>是否注册</th>
            </tr>
        </table>
    </div>

</div>
<script src="/jquery-3.5.1.min.js"></script>
<script src="/url.js"></script>
<script type="text/javascript">
    let url = requestUrl + "/erupt-api/user/getAddressBook";
    let urlSearchParams = new URLSearchParams(window.location.search);
    let tokenJson = localStorage.getItem('_token');
    let jsonObj = JSON.parse(tokenJson);
    $.ajax({
        type: "POST",
        url: url,
        headers: {
            token: jsonObj.token
        },
        data: {userId: urlSearchParams.get('userId')},
        datatype: "json",
        success: function (result) {
            console.log(result)
            if (result.code === 1) {
                dataInputHtml(result.data);
            } else {
                alert(result.msg)
            }
        }
    });


    //数据填入
    function dataInputHtml(dataArray) {
        if (dataArray === undefined) {
            return
        }
        console.log(dataArray)
        let registerStatus = {
            true: '已注册',
            false: '未注册'
        }

        if (dataArray.length > 0) {
            let addressBookInfo = '<tr>\n' +
                '                <th>姓名</th>\n' +
                '                <th>号码</th>\n' +
                '                <th>是否注册</th>\n' +
                '            </tr>'
            for (let i = 0; i < dataArray.length; i++) {
                let item = dataArray[i]
                addressBookInfo += '<tr data-row-key="360407293" className="ant-table-row ant-table-row-level-0" >' +
                    '<td class="ant-table-cell">' + item.name + '</td>' +
                    '<td class="ant-table-cell">' + item.mobile + '</td>'
                if (item.isRegister) {
                    addressBookInfo += '<td class="ant-table-cell" style="color: red">' + registerStatus[item.isRegister] + '</td>' +
                        '</tr>'
                } else {
                    addressBookInfo += '<td class="ant-table-cell">' + registerStatus[item.isRegister] + '</td>' +
                        '</tr>'
                }
            }
            inputById(addressBookInfo, 'address_book_table')
        }
    }

    dataInputHtml()


    function inputById(data, idName) {
        if (document.getElementById(idName)) {
            document.getElementById(idName).innerHTML = data
        }
    }
</script>
</body>
<style type="text/css">
    i {
        font-style: normal;
    }

    .report-con {
        background: #fff;
        color: #000;
        padding: 20px;
    }

    .title {
        font-size: 20px;
        margin: 28px 0 20px;
    }


    .user-info .row .item span {
        font-weight: bold;
    }

    .advice-title span {
        color: red;
        font-weight: bold;
    }

    .advice-title.level1 span {
        color: #42E61A;
    }

    .advice-title.level2 span {
        color: #22DDDD;
    }

    .advice-title.level3 span {
        color: #338FCC;
    }

    .advice-title.level4 span {
        color: #E6941A;
    }

    .advice-title.level5 span {
        color: #E61A42;
    }

    .advice-list .item span {
        position: absolute;
        left: 0;
        color: #000;
        top: 100%;
    }

    .advice-list .item i {
        position: absolute;
        right: 0;
        color: #000;
        top: 100%;
    }

    .table {
        margin-bottom: 20px;
    }

    .table table {
        width: 100%;
        table-layout: fixed;
        font-size: 12px;
        line-height: 36px;
        border-left: 1px solid #D9DAE2;
        border-top: 1px solid #D9DAE2;
        border-collapse: collapse;
    }

    .table table tr th {
        border-right: 1px solid #D9DAE2;
        border-bottom: 1px solid #D9DAE2;
        background: #ECEDF0;
    }

    .table table tr td {
        border-right: 1px solid #D9DAE2;
        border-bottom: 1px solid #D9DAE2;
        text-align: center;
        padding: 0;
    }
</style>
</html>
